<template>
  <div class="component need-footer bg-grey">
    <app-header title="版本信息" :needBack="true"></app-header>
    <div class="top">
      <div class="bg">
        <img src="../../assets/images/logo.png" alt="logo">
      </div>
    </div>
    <ul class="info-list">
      <li class="info-item">
        <span class="label">版本更新</span><span class="value">已是最新版本<i class="iconfont icon-back"></i></span>
      </li>
    </ul>
  </div>
</template>
<script>
import AppHeader from '@/components/common/AppHeader'
export default {
  name: "",
  data() {
    return {

    }
  },
  components: {
    AppHeader
  }
}
</script>
<style lang="less" scoped>
  @import '../../assets/less/default.less';
  .top {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: @blue;
    margin-bottom: .5rem;
    .bg {
      width: 1.8rem;
      height: 1.8rem;
      background: @white;
      border-radius: .1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 1.5rem;
        position: relative;
      }
    }
  }
  .info-list {
    display: flex;
    flex-direction: column;
    .info-item {
      width: 90%;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid @border;
      color: @grey;
      font-size: .3rem;
      line-height: .7rem;
      .label {
        display: block;
        width: 40%;
        text-align: left;
        color: #000000;
      }
      .value {
        display: block;
        width: 60%;
        text-align: right;
      }
      .iconfont {
        display: inline-block;
        transform: rotate(180deg);
        color: @grey;
        font-size: .3rem;
        vertical-align: top;
      }
    }
  }
</style>
